<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<!-- Object.defineProperty是给一个对象添加属性用到 
		-->
		<title>回顾Object.defineproperty方法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		let number = 16
		let person = {
			name: '张三',
			sex: '男'
		}
		/* 
		 Object.keys接收一个对象参数。可以把这个对象所有属性名提取出来，变成一个数组。
		 使用下面for循环也可以实现遍历对象属性名。
		 */
		console.log(Object.keys(person))
		for (key in person) {
			console.log('@', key)
		}
		Object.defineProperty(person, 'age', {
			// value:18,
			// enumerable:true，//控制属性是否可以枚举，默认值是false
			// writable:true，//控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false
			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get() {
				console.log('有人读取age属性了')
				return number
			},
			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value) {
				console.log('有人修改了age属性，且值是', value)
				number = value
			}
		})
		console.log(person)
	</script>
</html>